<!-- 技能管理 -->
<template>
  <div class="box" v-loading="loading">
      <div class="search">
         <div class="search-content">
              <div class="search-left">
                  <el-input
                  placeholder="请输入搜索内容"
                  v-model="keyWord"
                  autocomplete
                  maxlength="15"
                  show-word-limit
                  />
              </div>
              <div class="search-right">
                  <button @click="searchKeyWord()">查询</button>
              </div>
         </div>
      </div>
      <div class="top">
          <div class="top-content">
              <div>
                  <button  @click="dialogFormVisible = true">增加+</button>
                  <button @click="delIsChecked()">批量删除-</button>    
              </div>
            
          </div>
      </div>
      <div class="content" ref="wrap">
        <el-table
          ref="multipleTable"
          :data="skills"
          border
          fit="false"
          stripe
          show-header
          highlight-current-row
          lazy
          load
          height="100%"
          :row-style="{height: '50px'}"
          @selection-change="handleSelectionChange">
        >
          <el-table-column type="selection" width="55" align="center" fixed :selectable='checkboxInit'/>
          <el-table-column property="skillId" label="技能序号" show-overflow-tooltip width="120" align="center">
              <template #default="scope">
                  {{(this.pageNum-1)*this.pageSize+scope.$index+1}}       
              </template>
          </el-table-column>    
          <el-table-column property="skillName" label="技能名称" show-overflow-tooltip width="320"/>
          <el-table-column align="center" width="140" fixed="right">
            <template #header>
              操作
            </template>
            <template #default="scope">
              <el-button size="small" @click="dialogUpdate(scope.$index)">修改</el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.row.skillId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom">
          <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              @current-change="changePage"
              @prev-click="changePage"
              @next-click="changePage"
              :total="pageTotals"
          >
          </el-pagination>
      </div>
  </div>
<!-- Form -->
      <el-dialog title="添加技能内容" v-model="dialogFormVisible" lock-scroll :close-on-click-modal="false"  show-close="true" destroy-on-close="false">
          <el-form ref="forms" :model="forms">
              <el-form-item label="技能名称" :label-width="formLabelWidth" width="100px">
                  <el-input v-model="skill.skillName" autocomplete="off" class="el-input"></el-input>
              </el-form-item>
              <el-form-item label="">
                   <el-button @click="reAddSkills()">再次添加</el-button>
              </el-form-item>
          </el-form>
          <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="resetSkill()" >确 定</el-button>
          </div>
      </el-dialog>
      <el-dialog title="修改题目内容" v-model="dialogUpdatemVisible"  :close-on-click-modal="false" lock-scroll show-close="false">
          <el-form >
            <el-form-item>
                <el-input v-model="skillList.skillName"></el-input>
            </el-form-item>      
              
          </el-form>
          <div class="dialog-footer">
              <el-button @click="dialogUpdatemVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogUpdated()">确 定</el-button>
          </div>
      </el-dialog>
</template>

<script>

import {getSkillBykeyWordPage,getAllPage,addSkill,deleSkill} from '../../api/secondary_api/skill'
import {ElMessage } from 'element-plus'

export default{
  name:'Pageaddress',
   data() {
      return{
          dialogUpdatemVisible:false,//修改弹框的显示
          dialogFormVisible: false,//修改增加弹框的显示
          pageNum:1,//页码
          pageSize:10,//页面总条数
          pageTotals:0,//总页数
          keyWord:"",//模糊查询的条件
          skillLists:null,
          skillList:[],
          loading:true,
          companys:[],//查询的企业
          skills:[],//查询的技能
          skill:{
            "skillId": 0,
            "skillName": "",
            "tip": 0
           },
           skill1:`{
            "skillId": 0,
            "skillName": "",
            "tip": 0
           }`,
          multipleSelection: [],//被选中的行
         
      }
  },
  methods: {
    //   checkboxInit(){
    //     console.log("判断是否可选");
    //     console.log(row, index);
    //     if (row.id) {
    //         return 0; //不可勾选
    //     } else {
    //         return 1;
    //     }
    //   },
      openSuccess() {//成功信息弹窗
          this.$message({
              message: '添加数据成功！！！',
              type: 'success'
          });
       },
      openError(response) {//错误信息弹窗
         this.$message.error(response.msg);
       },
       reAddSkills(){
            this.resetSkill();
            this.dialogFormVisible = true; 
       },
       resetSkill(){//清空添加内容
            this.addSkills();
            // this.dialogFormVisible = false;  
            this.skill = JSON.parse(this.skill1);
            this.$refs.forms.resetFields();
       },
      addSkills(){//增加题目
        this.pageTotals = this.pageTotals+1; 
        var isHave = false;
        for(let i in this.skillLists){
            if(this.skillLists[i].skillName == this.skill.skillName){
                isHave = true;
                break;
            }
        }
        if(isHave){
            alert("你输入重复啦┑(￣Д ￣)┍")
        }else{
            addSkill(this.skill).then(
                response=>{
                    if (response.code == 200) {
                        // this.changePage(this.pageNum);
                        this.openSuccess();
                        return;
                    }else {
                        this.openError(response);
                        return;
                    }
                }
            );   
        }
      },
      dialogUpdate(i){//修改获取数据
          this.dialogUpdatemVisible=true;
          this.skillList = this.skills[i];
          console.log(this.skillList,"dddddddddddddddddddd")
      },
       dialogUpdated(){//修改后发送数据
          this.dialogUpdatemVisible = false;
          addSkill(this.skillList).then(
              response=>{
                  console.log(response);
              }
          );
        },
         handleDelete(index){
            deleSkill(index).then(
                response=>{
                    getSkillBykeyWordPage(this.pageNum,this.pageSize,this.keyword).then(
                        response=>{
                            this.skills = response.data;
                            console.log(this.skills,"22222222222222222")
                        }
                    );
                }
            );
          this.skills.splice(index,1);
         },
          delIsChecked(){//批量删除
              
              for (let index = 0; index < this.multipleSelection.length; index++) {
                 deleSkill(this.multipleSelection[index].skillId).then(
                       response=>{
                           console.log("成功！！！！！！！");
                       }
                   )
                   this.skills.splice(index,1);
                    multipleTable.values.clearSelection();
              }
                   
          },
          handleSelectionChange(val) {//全选
              console.log(val);
              this.multipleSelection = val;
              console.log(this.multipleSelection,"sssssssssssssssssssssss");
          },
          changePage(e){//搜索分页切换
              this.pageNum = e;   
              this.loading = true;
            getSkillBykeyWordPage(this.pageNum,this.pageSize,this.keyword).then(
                response=>{
                    this.skills = response.data;
                     this.loading = false;
                }
            );
          },
          searchKeyWord(){//模糊查询   
              this.loading = true;
              getSkillBykeyWordPage(this.pageNum,this.pageSize,this.keyWord).then(
                  response=>{
                      this.pageTotals = response.data.length;
                      this.skills =response.data;
                      this.loading = false;
                  }
              )
          } ,
      } ,  
      mounted(){
       getSkillBykeyWordPage(this.pageNum,this.pageSize,this.keyword).then(
              response=>{
                  this.skills = response.data;
                  console.log(this.skills,"22222222222222222")
              }
          );
          getAllPage().then(
              response=>{
                this.pageTotals = response.data.length;
                this.skillLists = response.data;
                 this.loading = false;
              }
          )
      },  
  }
</script>

<style scoped>
  .box{
      width: 100%;
      /* height: calc(100vh - 151px); */
      font-style: 40px;
      overflow: hidden;
  }
  .top{
      width: 100%;
      padding: 0 2%;
      overflow: hidden;
  }
  .top-content{
      width: 96%;
      height: 35px;
      margin-top: 10px;
      overflow: hidden;
  }
   .top-content>div>button{
       width: 130px;
       height: 35px;
       line-height: 35px;
       color: #000;
       border-radius: 5px;
      border: 1px solid #fff;
   }
   button:hover{
       opacity: 0.5;
   }
    .top-content>div>button:nth-of-type(1){
        background-color: #00ffff;
   }
   .top-content>div>button:nth-of-type(2){
         background-color: red;
   }
   .search{
       width: 100%;
       padding: 0 2%;
       overflow: hidden;
   }
   .search-content{
       width: 96%;
       overflow: hidden;
       margin-top: 10px;
   }
   .search-left{
       width: 25%;
       float: left;
   }
  .search-right{
       width: 10%;
       float: left;
   }
   .search-left>.el-input{
       width: 100%;
   }
   .search-right>button{
       width: 100%;
       height: 32px;
       overflow: hidden;
       background-color: #00ffff;
       float: right;
      border: 1px solid #fff;
      border-radius: 5px;
   }
  .content{
      height: calc(100vh - 265px);
      margin-top: 5px;
      padding: 0 2%;
      position: relative;
      display: flex;
  }
 

  .delBtn{
      background-color: rgba(245, 6, 6, 0.973);
      color: #fff;
  }
   .editBtn{
      background-color: #0079f3;
      color: #fff;
  }
  .delBtn,.editBtn{
      width: 65px;
      height: 30px;
      line-height: 30px;
      border: 0px;
      border-radius: 5px;
      margin-left: 10px;
      border: 1px solid #fff;
  }
  .dialog-footer{
      margin-left:42%;
  }
  .addButton{
      width: 20px;
      height: 20px;
      font-size: 20px;
      line-height: 20px;
      background-color: #fff;
      position: absolute;
      right: 0;
  }
  .delButton{
      width: 20px;
      height: 20px;
      font-size: 20px;
      line-height: 20px;
      background-color: #fff;
      position: absolute;
      right: 30px;
  }
  .el-input{
      width: 50%; 
  }
  .el-input__count{
      height: 10%;
  }
  .bottom{
      margin: 20px 2%;
  }
  
</style>